<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/mdui/css/mdui.min.css}">
    <link rel="stylesheet" th:href="@{/video/video-js.min.css}">
    <script th:src="@{/video/video.min.js}"></script>
    <script th:src="@{/video/zh-CN.js}"></script>
    <script th:src="@{/video/videojs.hotkeys.min.js}"></script>
    <title th:text="${file+' 云舒NAS'}"></title>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
<header th:replace="common :: header"></header>
<nav th:replace="common :: nav"></nav>
<section class="mdui-container">
    <div th:unless="${#lists.isEmpty(links)}" class="mdui-card" style="margin-bottom: 8px;">
        <div class="mdui-card-content links">
            <span th:each="link:${links}"><a th:href="${'/?location='+link.link}"
                                             th:text="${link.name}"></a><span>&#92;</span></span>
        </div>
    </div>
    <video-js id="video-id" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" controls preload="auto">
        <source th:src="${'/hls/'+name+'.m3u8'}" type="application/x-mpegURL">
    </video-js>
    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-btn-dense mdui-m-t-1 mdui-m-b-1"
            onclick="del()">删除转码及视频
    </button>
    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-btn-dense mdui-m-t-1 mdui-m-b-1"
            onclick="delTranscoding()">删除转码
    </button>
    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-btn-dense mdui-m-t-1 mdui-m-b-1"
            onclick="copyVideoPath()">复制视频地址
    </button>
    <label class="mdui-switch">MSE资源（解决某些浏览器倍速失效）
        <input type="checkbox" id="mse_checkbox"/>
        <i class="mdui-switch-icon"></i>
    </label>
    <div class="mdui-table-fluid">
        <table class="mdui-table mdui-table-hoverable">
            <thead>
            <tr>
                <th>Name</th>
                <th>Size</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="file: ${files}" onclick="go(this)" th:data-dir="${!file.file}"
                th:data-canplay="${file.canPlay}"
                th:data-location="${file.location}">
                <td><i th:if="${file.isFile()&&!file.canPlay}" class="mdui-icon material-icons">insert_drive_file</i>
                    <i th:if="${file.isFile()&&file.canPlay}" class="mdui-icon material-icons">videocam</i>
                    <i th:if="${!file.isFile() }" class="mdui-icon material-icons">folder</i>
                    <span th:if="${file.name==''}" th:text="${file.location}"></span>
                    <span th:if="${file.name!=''}" th:text="${file.name}"></span>
                </td>
                <td th:text="${file.size}">Mark</td>
            </tr>
            </tbody>
        </table>
    </div>
</section>
<script th:src="@{/mdui/js/mdui.min.js}"></script>
<script th:inline="javascript">
    'use strict';
    window.HELP_IMPROVE_VIDEOJS = false;
    const IS_MSE_RESOURCE = "IS_MSE_RESOURCE";
    const $$ = mdui.JQ;
    const links = [[${links}]];
    const name = [[${name}]];
    const path = links[links.length - 1].link;

    $$(function () {
        if (!localStorage.getItem(IS_MSE_RESOURCE)) {
            localStorage.setItem(IS_MSE_RESOURCE, "true");
        }
        const checkBox = document.getElementById("mse_checkbox");
        localStorage.getItem(IS_MSE_RESOURCE) === "true" ? checkBox.checked = true : checkBox.checked = false;
        checkBox.addEventListener("change", function (e) {
            if (e.target.checked) {
                localStorage.setItem(IS_MSE_RESOURCE, "true");
            } else {
                localStorage.setItem(IS_MSE_RESOURCE, "false");
            }
            window.location.reload();
        });
        setTimeout(function () {
            window.scrollTo(0, 0);
        }, 1000);

        // overrideNative=true为MSE
        videojs('video-id', {
            playbackRates: [0.5, 1, 1.5, 2, 2.5, 3],
            html5: {hls: {overrideNative: localStorage.getItem(IS_MSE_RESOURCE) === "true"}}
        })
            .ready(function () {
                this.hotkeys({
                    volumeStep: 0.1,
                    seekStep: 5,
                    enableModifiersForNumbers: false
                });
            });

        //player.playbackRate(speed);
    });

    function del() {
        const r = window.confirm("确认删除？");
        if (r === true) {
            $$.ajax({
                method: 'POST',
                url: './del' + document.location.search,
                success: function (data) {
                    window.location.href = '/?location=' + path;
                },
                error: function (xhr, textStatus) {
                    // xhr 为 XMLHttpRequest 对象
                    // textStatus 为包含错误代码的字符串
                    window.alert(textStatus)
                }
            });
        }
    }

    function delTranscoding() {
        const r = window.confirm("确认删除转码？");
        if (r === true) {
            $$.ajax({
                method: 'POST',
                url: './delTranscoding' + document.location.search,
                success: function (data) {
                    window.location.href = '/?location=' + path;
                },
                error: function (xhr, textStatus) {
                    // xhr 为 XMLHttpRequest 对象
                    // textStatus 为包含错误代码的字符串
                    window.alert(textStatus)
                }
            });
        }
    }

    function go(location) {
        if (location.dataset.dir === 'true') {
            window.location.href = "/?location=" + encodeURIComponent(location.dataset.location)
        } else if (location.dataset.canplay === 'true') {
            window.location.href = "/video?location=" + encodeURIComponent(location.dataset.location)
        }
    }

    function copyVideoPath() {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', document.location.origin + "/hls/" + name + ".m3u8");
        input.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            window.alert("已复制")
        } else {
            window.alert("无法复制");
        }
        document.body.removeChild(input);
    }
</script>
</body>
</html>
